{% extends "index.html" %}

{% block css-javascript-agregados %}		
	<!-- SEXYSELECT -->
	<link 	type="text/css" 		href="static/ui.sexyselect/css/ui.sexyselect.0.55.css" 			rel="stylesheet"/>
	<script type="text/javascript" 	src="static/ui.sexyselect/js/ui.sexyselect.min.0.6.js" >		</script>
{% endblock %}

{% block content %}
  <form name="assignUsertypeToUser" method="get" action="/comunidadcyt/accounts/usertype/assign/{{objuser.id}}">
  	<div class="row">
      <span class="left"><img class="img_border" width="128px" height="128px" src="{{objuser.get_profile.foto.url}}"/></span>
      <span class="right ui-corner-all" style="width:70%">
        <h4>{{objuser.first_name}} {{objuser.last_name}}</h4>
        {% if usertype_list %}
          <ul>
          {% for ut in usertype_list %}
            <li><h3>{{ut}}</h3></li>
          {% endfor %}
          </ul>
        {% else %}
          <p><i>No se ha asignado un tipo de usuario al usuario</i></p>
        {% endif %}
      </span>
    </div>
    <table name="campos" cellspacing="10px">
      <tr>
        <td>
          Tipo de Usuario:
        </td>
        <td>
          <select id="ut" multiple="true" name="usertype" onblur="javascript:checkHasUserType();">
            {% if types%}
              {% for eachType in types %}
                <option id="{{eachType}}" value="{{eachType.id}}">{{eachType}}</option>
              {% endfor %}
            {% else %}
                <option id="{{eachType}}" value="">No se han registrado tipos.</option>
            {% endif %}
          </select>
        </td>
      </tr>
      <tr>
        <td>
        </td>
        <td>
        </td>
      </tr>
    </table>

    <button>Asignar tipo al usuario</button>
	  <hr/>
	  <br/>
  </form>

	<div id="dialog-form" title="Crear Tipo Usuario">
		<p class="validateTips">Introduzca el nombre del tipo de usuario que desea registrar.</p>
		<form method="post" action="/comunidadcyt/accounts/usertype/create/"> {% csrf_token %}
			<fieldset>
				<label id="tipo_usuario">Tipo de Usuario</label>
				<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all"/>
				<button id="create-usertype" type="submit" class="add_ut_button">Agregar tipo de usuario</button>
				<input type="hidden" name="xhr" />
			</fieldset>
		</form>
	</div>

  <script type="text/javascript">
    
    $('#ut').sexyselect({ title: 'Elegir Tipo Usuario...', 
                                    allowFilter: true,
                                    allowDelete: false
                                  });
  </script>
{% endblock %}